<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="砍价商品" prop="ShopId">
      <el-select
        @change="sechange"
        v-model="ruleForm.ShopId"
        placeholder="请在下拉框中选择砍价商品"
        maxlength="255"
        :disabled="false"
        clearable
        style="float: left; width: 80%"
      >
        <el-option
          v-for="item in selectOptionsAll"
          :key="item.shopId"
          :label="
            '商品：' +
            item.shopName +
            '，价格：' +
            item.shopPrice +
            '元' +
            '，库存：' +
            item.shopStock +
            '件'
          "
          :value="item.shopId+','+item.shopPrice"
          
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="砍价有效时长" prop="BargainEffective">
      <el-input
        style="float: left; width: 80%"
        v-model.number="ruleForm.BargainEffective"
      ></el-input
      >小时
    </el-form-item>
    <el-form-item label="砍价活动开始时间" required>
      <el-col :span="11">
        <el-form-item prop="BargainBeginTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.BargainBeginTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="BargainBeginTime">
          <el-time-picker
            placeholder="选择时间"
            v-model="ruleForm.BargainBeginTime"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="砍价活动结束时间" required>
      <el-col :span="11">
        <el-form-item prop="BargainEndTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.BargainEndTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="BargainEndTime">
          <el-time-picker
            placeholder="选择时间"
            v-model="ruleForm.BargainEndTime"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="砍价标题" prop="BargainTitle">
      <el-input
        style="float: left; width: 80%"
        v-model="ruleForm.BargainTitle"
      ></el-input>
    </el-form-item>
    <el-form-item label="起始价格" prop="FloorPrice">
      <el-input
        readonly="true"
        style="float: left; width: 80%"
        v-model="ruleForm.FloorPrice"
      ></el-input>
    </el-form-item>
    <el-form-item label="砍价金额设置" prop="MinMoney">
      <el-input
        style="float: left; width: 40%"
        v-model.number="ruleForm.MinMoney"
        placeholder="最低砍价金额"
      ></el-input>
      -
      <el-input
        style="float: left; width: 40%"
        v-model.number="ruleForm.MaxMoney"
        placeholder="最高砍价金额"
      ></el-input
      >元
    </el-form-item>
    <el-form-item label="最低成交金额设置" prop="MinPrice">
      <el-input
        style="float: left; width: 80%"
        v-model.number="ruleForm.MinPrice"
      ></el-input
      >元
    </el-form-item>
    <el-form-item label="最少帮忙人数设置" prop="MaxPeople">
      <el-input
        style="float: left; width: 80%"
        v-model.number="ruleForm.MaxPeople"
      ></el-input
      >元
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  created() {
    this.getSelectOptions()
  },
  data() {
    return {
      //绑定
      //获取下拉values
      haha:'',
      baga:[],
      selectOptionsAll: [],
      valuessss:'',
      ruleForm: {
        ShopId: '', //要砍价的商品ID
        BargainEffective: '', //砍价有效时长
        BargainBeginTime: '', //砍价活动开始时间
        BargainEndTime: '', //砍价活动结束时间
        BargainTitle: '', //砍价邀请标题
        MinMoney: '', //每刀最少金额
        MaxMoney: '', //每刀最多金额
        MaxPeople: '', //最多帮忙的人数
        MinPrice: '', //最低砍到什么价位
        FloorPrice: '', //这个砍价活动的起始价格
      },
      rules: {
        ShopId: [
          { required: true, message: '请选择砍价的商品', trigger: 'blur' },
        ],
        BargainEffective: [
          { required: true, message: '请输入砍价有效时长', trigger: 'blur' },
          { type: 'number', message: '有效时长只能是数字', trigger: 'blur' },
        ],
        BargainBeginTime: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        BargainEndTime: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        BargainTitle: [
          { required: true, message: '输入砍价标题', trigger: 'blur' },
          {
            min: 5,
            max: 10,
            message: '标题长度在 5 到 10 个字符',
            trigger: 'blur',
          },
        ],
        MinMoney: [
          { required: true, message: '输入砍价金额', trigger: 'blur' },
          { type: 'number', message: '砍价金额只能是数字', trigger: 'blur' },
        ],
        MinPrice: [
          { required: true, message: '输入最低成交金额', trigger: 'blur' },
          {
            type: 'number',
            message: '最低成交金额只能是数字',
            trigger: 'blur',
          },
        ],
        MaxPeople: [
          { required: true, message: '输入最少帮忙人数', trigger: 'blur' },
          {
            type: 'number',
            message: '最少帮忙人数只能是数字',
            trigger: 'blur',
          },
        ],
      },
    }
  },

  methods: {
    //下拉框改变事件
    sechange(val) {
      console.log('我的下拉框', val)
      this.baga=[];
      this.baga.push(val.split(','))
      console.log('我的下拉框', this.baga)
      //给起始价格赋值
      this.ruleForm.FloorPrice = this.baga[0][1]
      //this.ruleForm = val
      //console.log(ruleForm.ShopId,"wf");
    },
    //初始化下拉框中的选项
    getSelectOptions() {
      this.axios
        .get(
          'https://localhost:44379/api/SexShopModel/GetSexShopModel?pageIndex=1&pageSize=1000'
        )
        .then((res) => {
          this.selectOptionsAll = res.data.data
          console.log(this.selectOptionsAll, '哈哈哈哈')
        })
    },
    submitForm(formName) {
      console.log('我的砍价', this.ruleForm)
      this.axios
        .post(
          'https://localhost:44379/api/BargainPc/CreateBargainShop',
          this.$qs.stringify({
            ShopId: this.baga[0][0],
            BargainEffective: this.ruleForm.BargainEffective,
            BargainBeginTime: this.ruleForm.BargainBeginTime,
            BargainEndTime: this.ruleForm.BargainEndTime,
            BargainTitle: this.ruleForm.BargainTitle,
            MinMoney: this.ruleForm.MinMoney,
            MaxMoney: this.ruleForm.MaxMoney,
            MaxPeople: this.ruleForm.MaxPeople,
            MinPrice: this.ruleForm.MinPrice,
            FloorPrice: this.ruleForm.FloorPrice,
          })
        )
        .then((res) => {
          if (res.data.code > 0) {
            //返回成功，弹窗提示
            this.$message({
              message: res.data.msg,
              type: 'success',
            })
            //跳转到砍价商品列表
            this.$router.push({ path: '/bargainlist' })
          }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>